<!-- 数据列表 -->
<template>
  <div class="box">
    <div class="content">
      <ColumnLabel label="数据列表页面">
        <el-button @click="back">
          <SvgIcon name="back" width="14px" height="14px" /> &nbsp;返回首页
        </el-button>
      </ColumnLabel>
      <div class="form">
        <ul class="form_list">
          <li class="form_item">
            <el-input v-model="WarehouseStore.params.keyword" @keyup.enter="enterQuery" placeholder="关键字搜索（名称或编号）">
              <template #suffix>
                <el-icon class="el-input__icon">
                  <search />
                </el-icon>
              </template>
            </el-input>
          </li>
          <li class="form_item" v-for="(item, index) in state.searchList" :key="index">
            <div class="close" @click="handleCloseSearch(index)">
              <el-icon>
                <Close />
              </el-icon>
            </div>
            <el-input v-model="item.value" :placeholder="item.nameValue" v-on:keyup.enter="submitForm">
              <template #append>{{ item.SBMC }}</template>
            </el-input>
          </li>
          <li class="form_ope">
            <el-popover placement="bottom" ref="popoverRef" :width="100" trigger="click">
              <div class="popover">
                <el-collapse>
                  <el-collapse-item v-for="(item, index) in state.popoverList" :title="item.nameValue" :name="item.code"
                    :key="index">
                    <p v-for="(row, key) in item.children" :key="key" @click='treeHandler(item, row)'>{{ row.nameValue }}
                    </p>
                  </el-collapse-item>
                </el-collapse>
              </div>
              <template #reference>
                <el-button>
                  <SvgIcon name="form_add" width="20px" height="20px" />
                </el-button>
              </template>
            </el-popover>
          </li>
          <li class="form_ope">
            <el-button @click="advancedSearchHandler">
              <SvgIcon name="senior_form" width="20px" height="20px" /> &nbsp;高级查询
            </el-button>
          </li>
        </ul>
      </div>
      <div class="operate">
        <div class="operate_left">
          <el-radio-group v-model="WarehouseStore.tabType" @change="redChange" size="default" fill="#FF0F40">
            <template v-for="item in SettingStore.columnType">
              <el-radio-button :label="item.label" v-if="item.hidden">{{
                `${item.label}(${item.num})`
              }}</el-radio-button>
            </template>
          </el-radio-group>
          <el-button @click="setHeaderHandler">
            <SvgIcon name="setting" width="14px" height="14px" />&nbsp;设置
          </el-button>
        </div>
        <div class="operate_right">
          <el-checkbox v-model="state.allTabs">导出全部页签数据</el-checkbox>
          <el-button type="danger" size="default" @click="handleExport">导出Excel</el-button>
        </div>
      </div>
      <div class="table">
        <el-table :data="WarehouseStore.dataList" border height="600px"
          :header-cell-style="{ color: '#303133', fontSize: '14px', backgroundColor: '#F8F9FC' }">
          <template v-for="item in SettingStore.column">
            <el-table-column :prop="item.prop" :label="item.label" show-overflow-tooltip v-if="item.hidden"
              align="center">
              <template #default="{ row }">
                <span v-if="item.prop === 'modifyAt'">{{ time(row[item.prop]) }}</span>
                <span v-else>{{ row[item.prop] }}</span>
              </template>
            </el-table-column>
          </template>
          <el-table-column align="center">
            <template #header>
              <div class="header_tabel" @click="setTableHandler">
                <SvgIcon name="setting" width="14px" height="14px" />
                <span>设置表头</span>
              </div>
            </template>
            <template #default="{ row }">
              <div class="btn" @click="openHandler(row)">详情</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <el-pagination :current-page="WarehouseStore.page" :page-size="WarehouseStore.limit"
          :page-sizes="[10, 20, 50, 100]" :small="false" :background="true"
          layout="total, sizes, prev, pager, next, jumper" :total="WarehouseStore.total"
          @size-change="WarehouseStore.handleSizeChange" @current-change="WarehouseStore.handleCurrentChange" />
      </div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { onMounted, reactive, ref } from 'vue'
import { dayjs } from 'element-plus'
import { exportPost } from '@/api/usemap'
import { ElMessage } from "element-plus"
import columns from "@/views/home/components/column"
import useSettingStore from '@/store/modules/setting'
const SettingStore = useSettingStore()
import useWarehouseStore from '@/store/modules/warehouse'
const WarehouseStore = useWarehouseStore()
const state = reactive<any>({
  searchList: [],
  popoverList: [],
  allTabs: false
})
//  时间转换
const time = (value: number) => {
  if (!value) return ''
  return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
}
//  设置
const setHeaderHandler = () => {
  SettingStore.setColumnName('设置')
  SettingStore.setTableHeaderShow = !SettingStore.setTableHeaderShow
}

//  设置表头
const setTableHandler = () => {
  SettingStore.setColumnName(WarehouseStore.tabType)
  SettingStore.setTableHeaderShow = !SettingStore.setTableHeaderShow
}

//  根据类型获取表头
const redChange = () => {
  SettingStore.setColumnName(WarehouseStore.tabType)
  SettingStore.setColumn()
  WarehouseStore.isQuery = false
  WarehouseStore.params = {}
  WarehouseStore.page = 1
  WarehouseStore.limit = 10
  SettingStore.columnType.forEach((item: any) => {
    if (item.label === WarehouseStore.tabType) {
      WarehouseStore.type = item.type
      WarehouseStore.dataListAjax()
    }
  })
}

//  关键字搜索
const enterQuery = () => {
  WarehouseStore.dataListAjax()
}

//  高级搜索
const advancedSearchHandler = () => {
  WarehouseStore.disabled = true
  SettingStore.advancedSearchShow = !SettingStore.advancedSearchShow
}
//  新增搜索条件
const popoverRef = ref()
const treeHandler = (item: any, row: any) => {
  const obj = {
    SBMC: item.nameValue,
    ...row
  }
  state.searchList.push(obj)
  popoverRef.value.hide()
}
//  删除过滤条件
const handleCloseSearch = (index: number) => {
  state.searchList = state.searchList.filter((_item: any, key: number) => index !== key)
  submitForm()
}
//  回车搜索
const submitForm = () => {
  const params: any = {}
  state.searchList.forEach((item: any) => {
    params[item.name] = item.value
  })
  WarehouseStore.params = params
  WarehouseStore.dataListAjax()
}
//  详情
const openHandler = (row: any) => {
  WarehouseStore.infoList = row
  SettingStore.detailsShow = !SettingStore.detailsShow
}
//  导出
const handleExport = async () => {
  try {
    let params: any[] = []
    if (state.allTabs) {  //  导出全部
      const loc: any = localStorage.getItem('columns')
      const columns: any = JSON.parse(loc)
      columns['设置'].forEach((item: any) => {
        if (item.hidden) {
          params.push({
            tableName: tableName(item.label),
            returnFieldNames: []
          })
        }
      })
    } else {  //  导出当前页
      params = [{
        tableName: tableName(WarehouseStore.tabType),
        returnFieldNames: []
      }]
    }
    await exportPost(params)
    ElMessage.success('导出成功，请去下载中心下载')
  } catch (error) {

  }
}
//  获取表名
const tableName = (value: string) => {
  return WarehouseStore.treeList.map((item: any) => { if (item.nameValue === value) return item.name }).join('')
}
//  返回
const back = () => {
  SettingStore.propertyShow = !SettingStore.propertyShow
}
onMounted(() => {

  let loc: any = localStorage.getItem("columns");
  if (loc) {
    SettingStore.columnType = JSON.parse(loc)["设置"]
  } else {
    SettingStore.columnType = columns["设置"]
  }

  WarehouseStore.treeList.forEach((item: any) => {
    if (item.nameValue === WarehouseStore.tabType) {
      state.popoverList.push(item)
    }
  })
  WarehouseStore.dataListTab()
})

</script>

<style scoped lang="scss">
.popover {
  max-height: 400px;
  overflow: auto;

  p {
    cursor: pointer;

    &:hover {
      color: #FF0F40;
    }
  }
}

.header_tabel {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  span {
    margin-left: 2px;
  }
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background-color: #e4e4e4;
  padding: 10px;

  .content {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;

    .form {
      padding: 0 16px;

      .form_list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .form_item {
          position: relative;
          width: 240px;
          margin-right: 10px;

          .close {
            position: absolute;
            top: -8px;
            right: -6px;
            z-index: 99;
            border-radius: 20px;
            background-color: #e4e4e4;
            cursor: pointer;

            i {
              color: #999;
              font-size: 16px;
            }
          }
        }

        .form_ope {
          margin-right: 10px;
        }
      }
    }

    .operate {
      display: flex;
      justify-content: space-between;
      padding: 16px;

      .operate_left {
        display: flex;
        align-items: center;
      }

      .operate_right {
        display: flex;
        align-items: center;

        button {
          margin-left: 16px;
        }
      }
    }

    .table {
      padding: 0 16px;
    }

    .footer {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 68px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-top: 1px solid #EAEEF6;
    }
  }
}
</style>